@import './_vars.scss';

.xdh-map-overview {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  transition: all 0.5s;
  &__trigger {
    position: absolute;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: $--border-radius; 
    
    cursor: pointer;
    line-height: 26px;
    overflow: hidden;
    :hover {
      opacity: 0.5;
    }
    i {
      font-size: 30px;
      text-align: center;
      transform: translateX(-4px);
      display: inline-block;
    }
    &.is-light{
      background: $--overview-trigger-color-light;
      i {
        color: $--overview-trigger-color-dark;
      }
    }
    &.is-dark{
      background: $--overview-trigger-color-dark;
      i {
        color: $--overview-trigger-color-light; 
      }
    }
    &.left-top{
      left: 0;
      top: 0;
    }
    &.right-top{
      right: 0;
      top: 0;
    }
    &.left-bottom{
      left: 0;
      bottom: 0;
    }
    &.right-bottom{
      right: 0;
      bottom: 0;
    }
  }
  &__map{
    display: block;
    opacity: 1;  
    transition: all 0.9s;
    .overview-map{
      overflow: hidden;
      border-radius: 3px;
      border: 1px solid gray;
    }
  }
  &.close{
    width: 24px;
    height: 24px;
    .xdh-map-overview__map{
      opacity: 0;
    }
  }  
}